<template>
  <div>
    <!-- <van-tabs background="transparent" v-model="active" line-height="0px">
      <van-tab v-for="(item, index) in List" :key="index">
        <template #title>
          <div @click="sheepJump(item)" :class="['tabAries', active == index ? 'activeStyle' : '']">
            <img width="22px" src="../assets/img/bzsc/xby.png" />
            <p>{{ item.name }}</p>
          </div>
        </template>
      </van-tab>
    </van-tabs> -->
    <div style="background: #fff;padding-bottom:14px">
      <title-panel title="母羊生产计划" />
        <div v-if="!!newList1 && newList1.length>0" style="margin-top:8px;">
          <div class="productionContent" v-for="(item, indexs) in newList1" :key="indexs">
            <div class="flex">
              <p class="flex-centers"><i></i></p>
              <p>{{item.name}}</p>
            </div>
            <div>
              <van-cell v-if="!!item.childList && item.childList.length>0" class="content1">
                <div v-for="(ite,ind) in item.childList" :key="ind" >
                  <p>{{ite.physiologyStageShow}}</p>
                  <div v-if="!!ite.operationList && ite.operationList.length>0">
                    <span v-for="(ite1,ind1) in ite.operationList" :key="ind1" :class="ite.operationList.length == ind1/1+1 ? 'content1L':''">{{ite1.name}}</span>
                  </div>
                  <i v-if="item.childList.length != ind/1+1"/>
                </div>
              </van-cell>
            </div>
          </div>
          <div v-if="newList2.length>0" class="outerRing">
            <img src="../assets/img/myx.png" />
            <div v-if="!!newList2 && newList2.length>0" class="productionContentWo" v-for="(item, indexs) in newList2" :key="indexs">
              <div class="flex">
                <p class="flex-centers"><i></i></p>
                <p>{{item.name}}</p>
              </div>
              <div :class="[indexs == newList2.length - 1 ? 'contentBorder' : '']">
                <van-cell v-if="!!item.childList && item.childList.length>0" class="content1">
                  <div v-for="(ite,ind) in item.childList" :key="ind">
                    <p>{{ite.physiologyStageShow}}</p>
                    <div v-if="!!ite.operationList && ite.operationList.length>0">
                       <span v-for="(ite1,ind1) in ite.operationList" :key="ind1" :class="ite.operationList.length == ind1/1+1 ? 'content1L':''">{{ite1.name}}</span>
                    </div>
                    <i v-if="item.childList.length != ind/1+1"/>
                  </div>
                </van-cell>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div style="background: #fff; margin-top: 10px;padding-bottom:14px">
      <title-panel title="公羊生产计划" />
        <div style="margin-top:8px;">
          <div v-if="!!newList3 && newList3.length>0" class="productionContent" v-for="(item, indexs) in newList3" :key="indexs">
            <div class="flex">
              <p class="flex-centers"><i></i></p>
              <p>{{item.name}}</p>
            </div>
            <div :class="[indexs == newList3.length - 1 ? 'contentBorder' : '']">
              <van-cell v-if="!!item.childList && item.childList.length>0" class="content1">
                <div v-for="(ite,ind) in item.childList" :key="ind" >
                  <p>{{ite.physiologyStageShow}}</p>
                  <div v-if="!!ite.operationList && ite.operationList.length>0">
                    <span v-for="(ite1,ind1) in ite.operationList" :key="ind1" :class="ite.operationList.length == ind1/1+1 ? 'content1L':''">{{ite1.name}}</span>
                  </div>
                  <i v-if="item.childList.length != ind/1+1"/>
                </div>
              </van-cell>
            </div>
          </div>
        </div>
    </div>

    <!-- <temporarily-data v-else-if="List.length > 0 && !(operationList > 0)" /> -->
  </div>
  <!-- <temporarily-data v-else /> -->
</template>
<script>
import { Tab, Tabs, Collapse, CollapseItem, Cell } from 'vant'
import dayjs from 'dayjs'
import TemporarilyData from '@/components/temporarilyData'
import TitlePanel from './titlePanel'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
export default {
  name: 'jobPlacement',
  components: {
    TemporarilyData,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Cell.name]: Cell,
    TitlePanel
  },
  data() {
    return {
      List: [],
      active: 0,
      houseInfoId: getValue('fzmHourseId') || '',
      activeNames: ['1'],
      operationList: [],
      newList1:[],
      newList2:[],
      newList3:[]
    }
  },
  created() {},
  mounted() {
    getHandle(`/agri/api/yzbzh/breedStandard/queryBreedStandardWorkList/`,{
      houseInfoId:this.houseInfoId
    }).then(res => {
      if (res.status === 0) {
        let val = res.data['0']
        let val1 = res.data['1']
        let newList = []
        let newListG = []
        for(let key in val){
          newList.push({
            name:key,
            childList:val[key]
          })
        }
        for(let key1 in val1){
          newListG.push({
            name:key1,
            childList:val1[key1]
          })
        }
        this.newList1 = newList.splice(0,3)
        this.newList2 = newList.splice(0,5)
        this.newList3 = newListG
      }
    })
  },
  methods: {
    byDetails(items) {
      setValue('bzDetails', JSON.stringify(items))
      this.$bridge.call('operationDetails')
    },
    sheepJump(item) {
      this.operationList = item.operationList
    },
    productionPlan() {
      getHandle(`/agri/api/yzbzh/standardUse/queryDetail/${this.houseInfoId}`).then(res => {
        if (res.status === 0) {
          this.List = res.data.stageList
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.outerRing {
  position: relative;
  border-radius: 10px;
  border: 1px solid #fff3da;
  margin-left: 10px;
  margin-right: 16px;
  padding-top: 15px;
  >img{
    position: absolute;
    top: -1px;
    right: -1px;
    width: 30px;
    height: 30px;
  }
}
::v-deep .van-tabs__line {
  height: 0 !important;
}
::v-deep .van-tabs__wrap {
  height: 110px !important;
}
.tabAries {
  background-color: #d0e9e9;
  width: 66px;
  height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  > P {
    color: #94b4b8;
    font-size: 13px;
    margin-top: 5px;
  }
}
::v-deep .van-tab {
  padding: 0 6px;
}
.activeStyle {
  width: 82px;
  height: 82px;
  background: url('../assets/img/bzsc/active.png') no-repeat;
  background-size: cover;
  margin-top: 9px;
  > p {
    color: #fff !important;
  }
}
.productionContent {
  margin-bottom: -3px;
  margin-left: 15px;
  // padding-bottom: 6px;
  > div {
    &:first-child {
      > p {
        align-items: center;
        &:first-child {
          position: relative;
          width: 14px;
          height: 14px;
          border-radius: 7px;
          background-color: #bde2e2;
          margin-right: 15px;
          > i {
            display: block;
            width: 6px;
            height: 6px;
            background-color: #37b5b5;
            border-radius: 3px;
          }
        }
        &:last-child {
          font-size: 15px;
          color: #333333;
          line-height: 13px;
        }
      }
    }
    &:last-child {
      padding-left: 22px;
      min-height: 30px;
      border-left: 1px dashed #37b5b5;
      margin-left: 6px;
      margin-top: 6px;
      padding-top: 6px;
      padding-right: 16px;
      padding-bottom: 6px;
      margin-bottom: 10px;
      .content1 {
        padding: 10px 0;
        padding-bottom: 0;
        // position: relative;
        // top: -19px;
        border-radius: 6px;
        flex: 1;
        background: RGBA(251, 253, 253, 1);
        border-radius: 6px;
        // opacity: 0.2;
        border: 1px solid RGBA(215, 241, 241, 1);
        > div {
          > div {
            margin-bottom: 10px;
            >i{
              margin-top: 10px;
              display: block;
              border-bottom: 1px dashed #d3eeee;
              width: 94%;
              margin-left: 10px;
              height: 0;
            }
            > p {
              font-size: 13px;
              font-weight: 400;
              color: #666666;
              height: auto !important;
              padding-left: 10px;
            }
            > div {
              > span {
                font-size: 13px;
                font-weight: 400;
                color: #999999;
                display: inline-block;
                padding: 0 10px;
                height: 10px;
                line-height: 10px;
                border-right: 1px solid #eeeeee;
              }
            }
          }
        }
      }
    }
  }
}
.productionContentWo {
  margin-bottom: -3px;
  margin-left: 4px;
  // padding-bottom: 6px;
  > div {
    &:first-child {
      > p {
        align-items: center;
        &:first-child {
          position: relative;
          width: 14px;
          height: 14px;
          border-radius: 7px;
          background-color: #FFF7E4;
          margin-right: 15px;
          > i {
            display: block;
            width: 6px;
            height: 6px;
            background-color: rgba(255, 197, 70, 1);
            border-radius: 3px;
          }
        }
        &:last-child {
          font-size: 15px;
          color: #333333;
          line-height: 13px;
        }
      }
    }
    &:last-child {
      padding-left: 22px;
      min-height: 30px;
      border-left: 1px dashed #FFE2A2;
      margin-left: 6px;
      margin-top: 6px;
      padding-top: 6px;
      padding-right: 16px;
      padding-bottom: 6px;
      margin-bottom: 10px;
      .content1 {
        padding: 10px 0;
        padding-bottom: 0;
        // position: relative;
        // top: -19px;
        border-radius: 6px;
        flex: 1;
        background: #FFFDFB;
        border-radius: 6px;
        // opacity: 0.2;
        border: 1px solid #FFF4DA;
        > div {
          > div {
            margin-bottom: 10px;
            >i{
              margin-top: 10px;
              display: block;
              border-bottom: 1px dashed #FFF1D6;
              width: 94%;
              margin-left: 10px;
              height: 0;
            }
            > p {
              font-size: 13px;
              font-weight: 400;
              color: #666666;
              height: auto !important;
              padding-left: 10px;
            }
            > div {
              > span {
                font-size: 13px;
                font-weight: 400;
                color: #999999;
                display: inline-block;
                padding: 0 10px;
                height: 10px;
                line-height: 10px;
                border-right: 1px solid #eeeeee;
              }
            }
          }
        }
      }
    }
  }
}
.contentBorder {
  border: none !important;
}
.content1F {
  padding-left: 0 !important;
}
.content1L {
  border-right: none !important;
}
.content1B{
  border-bottom: none!important;
}
</style>
